import 'package:flutter/material.dart';

/// 横向布局
class Rowdemo {
  static ListView getListView() {
    return ListView(
      children: [getWidget()],
    );
  }

  static Widget getWidget2(){
    return Row(
      textDirection: TextDirection.rtl,//从左往右还是从右往左
      mainAxisSize: MainAxisSize.min,
      children: [
        Text("1"),
        SizedBox(
          width: 400,
          height: 400,
          child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.red),
          ),
        ),
        SizedBox(
          width: 400,
          height: 400,
          child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.green),
          ),
        ),
        SizedBox(
          width: 400,
          height: 400,
          child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.blue),
          ),
        ),
        SizedBox(
          width: 400,
          height: 400,
          child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.black38),
          ),
        ),
      ],
    );
  }

  /*
  解释：第一个Row很简单，默认为居中对齐；第二个Row，由于mainAxisSize值为MainAxisSize.min，
  Row的宽度等于两个Text的宽度和，所以对齐是无意义的，所以会从左往右显示；
  第三个Row设置textDirection值为TextDirection.rtl，所以子组件会从右向左的顺序排列，
  而此时MainAxisAlignment.end表示左对齐，所以最终显示结果就是图中第三行的样子；
  第四个 Row 测试的是纵轴的对齐方式，由于两个子 Text 字体不一样，所以其高度也不同，
  我们指定了verticalDirection值为VerticalDirection.up，即从低向顶排列，
  而此时crossAxisAlignment值为CrossAxisAlignment.start表示底对齐。
   */
  static Column getWidget() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("row1-1"), Text("row1-2")],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("row2-1"), Text("row2-2")],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          textDirection: TextDirection.rtl,
          children: [Text("row3-1"), Text("row3-2")],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          verticalDirection: VerticalDirection.up,
          children: [
            Text("row4-1", style: TextStyle(fontSize: 30.0)),
            Text("row4-2")
          ],
        )
      ],
    );
  }
}
/*
textDirection：表示水平方向子组件的布局顺序(是从左往右还是从右往左)，默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左)。
mainAxisSize：表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子 widgets 实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度；而MainAxisSize.min表示尽可能少的占用水平空间，当子组件没有占满水平剩余空间，则Row的实际宽度等于所有子组件占用的水平空间；
mainAxisAlignment：表示子组件在Row所占用的水平空间内对齐方式，如果mainAxisSize值为MainAxisSize.min，则此属性无意义，因为子组件的宽度等于Row的宽度。只有当mainAxisSize的值为MainAxisSize.max时，此属性才有意义，MainAxisAlignment.start表示沿textDirection的初始方向对齐，如textDirection取值为TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection取值为TextDirection.rtl时表示从右对齐。而MainAxisAlignment.end和MainAxisAlignment.start正好相反；MainAxisAlignment.center表示居中对齐。读者可以这么理解：textDirection是mainAxisAlignment的参考系。
verticalDirection：表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down，表示从上到下。
crossAxisAlignment：表示子组件在纵轴方向的对齐方式，Row的高度等于子组件中最高的子元素高度，它的取值和MainAxisAlignment一样(包含start、end、 center三个值)，不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection值为VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；
children ：子组件数组。
 */
